<template>
  <div class="container">
    <router-link to="/city"
      ><button class="city">
        {{ this.$store.state.city }}
      </button></router-link
    >

    <!-- 轮播 -->
    <Swiper> </Swiper>
    <div id="nav" :class="isNav ? 'fixed' : ''" ref="m">电影</div>
    <div class="naver" :class="isNav ? 'fix' : ''" ref="n">
      <router-link to="/films/nowPlaying">正在热映</router-link>
      <router-link to="/films/comingSoon">即将上映</router-link>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import Swiper from "./components/Swiper.vue";
export default {
  data() {
    return {
      isNav: false,
      city: "武汉",
    };
  },
  components: {
    Swiper,
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    // var city = localStorage.getItem("name")
    //     this.city = city
  },
  activated(){
    console.log("activated")
  },
  deactivated(){
    console.log("deactivated")
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      var scrollTop = window.scrollY;
      if (scrollTop >= 300) {
        this.isNav = true;
        this.$refs.m.style.opacity = 1;
        this.$refs.m.style.display = "block";
        this.$refs.n.style.opacity = 1;
      } else {
        this.isNav = false;
        this.$refs.m.style.opacity = 0;
        this.$refs.m.style.display = "none";
        this.$refs.n.style.opacity = 1;
      }
    },
    handleClick() {
      this.$router.push("search");
    },
  },
};
</script>

<style scoped>
.router-link-active {
  color: orange;
  border-bottom: 1px solid orange;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  background-color: thistle;
}
.fix {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  line-height: 50px;
}
.container {
  height: 3500px;
}
.container >>> .van-swipe img {
  /* height: 300px; */
  width: 100%;
}
#nav {
  width: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 50px;
  display: none;
}
.naver {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 15px;
  line-height: 50px;
  background-color: white;
}
.city {
  position: absolute;
  z-index: 1000;
}
</style>